<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>from</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .contain {
            position: relative;
        }

        img {
            width: 1400px;
            height: 700px;
            position: absolute;
        }

        .contain-child {
            width: 400px;
            height: 400px;
            margin: 200px 200px;
            background-color: rgb(0, 2, 0, 0);
            border: 1px solid rgb(0 5 0 / 15%);
            display: flex;
            align-items: center;
            text-align: center;
            position: absolute;
            font-size: 20px;
        }

        input {
            width: 230px;
            height: 25px;
            margin: 13px;
            border-radius: 5px;
            border: none;
        }
        button{
            width: 120px;
            height: 25px;
            border-radius: 4px;
            margin-top: 30px;
            border: none;
            color: black;
            background-color: rgb(212, 153, 119);
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="contain">
        <img src="./img.jpg" alt="">
        <div class="contain-child">
            <form action="http://localhost:3000/banyuan" method="get">
                <label for="">username</label>
                <input type="text" name="username" class="username">
                <label for="">password</label>
                <input type="password" name="password" class="password">
                <label for="" class="stern">input again</label>
                <input type="password" name="repassword" class="re-password" >
                <button type="submit" disabled id='btn'>注册</button>
            </form>
        </div>
    </div>

    <script src="./form.js">
            // 2. 复习三次握手，4次挥手
            //三次握手的作用是为了服务器和客户端明确自己的收发能力是否正常，并且建立连接
            //第一次握手客户端发送网络包，服务端收到后确认客户端发送正常，第二次握手是服务端向客户端发送包，客户端知道服务端接受和发送能力正常，第三次是客户端发送包让服务端知道自己接收能力正常
            //四次挥手是终止连接，原因是HTTP中是半关闭的，在一边关闭自己的发送能力之后还是有接收能力的
            // 第一次挥手 客户端发送报文，停止发送数据，主动关闭连接进入等待状态等待服务器的确认，第二次挥手服务端收到报文后发包到客户端表示收到了客户端停止发包的信息进入关闭等待状态，第三次挥手服务器也关闭发送报文，第四次客户端收到后发包给服务端，客户端进入关闭等待状态
            // 3. 长连接与短链接
            // 长连接：客户端和服务器进行连接后不断开，之后客户端再访问服务器的内容时，继续使用这条通道
            //短连接： 客户端和服务端建立连接发送完数据马上断开，下次发送数据重新建立连接HTTP1.0中默认使用的是短连接，从1。1开始默认使用长链接
            // 4. get与post的区别
             //get 是请求获取资源 而post是更新数据get是幂等的不管调用多少次都会出现不同的http方法而post不是
</script>
</body>

</html>